<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>问卷layui实现</title>

    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <!--<link rel="stylesheet" type="text/css" href="C:/Users/lenovo/Desktop/layui/layui/css/layui.css" />-->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
      .center {
        text-align: center;
      }

      .title {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 32px;
        font-weight: 400;
      }

      .desc {
        text-indent: 1em;
      }

      .layui-elem-field legend {
        font-size: 16px;
      }

      @media screen and (max-width: 768px) {
        * {
          font-size: 14px;
        }

        .title {
          font-size: 15px;
          font-weight: 400;
        }
      }

    </style>
  </head>

  <body style="background-color: #F0F0F0;">
    <div class="layui-container">
      <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md10 center">
          <p class="title" th:text="${ question.title }">
            标题
          </p>
        </div>
      </div>
      <fieldset class="layui-elem-field layui-field-title">
        <legend>填写说明：</legend>
        <div class="layui-field-box desc" th:utext="${question.desc}">
          描述
        </div>
      </fieldset>

      <form class="layui-form" th:method="post" th:action="@{/submit}">
        <div class="layui-form-item">
          <input type="hidden" name="questionId" lay-skin="primary" th:value="${question.id}"/>
        </div>
        <div class="layui-form-item" th:each="su,iterStat: ${question.subject}">
          <div class="layui-row">
            <div class="layui-col-xs10 layui-col-sm10 layui-col-md10
            layui-col-md-offset1 layui-col-xs-offset1 layui-col-sm-offset1"
                 th:text="|${iterStat.index + 1}、${su.title}|">
              题目
            </div>
          </div>
          <div class="layui-row" th:each="option : ${su.options}">
            <div class="layui-col-xs10 layui-col-sm10 layui-col-md10
            layui-col-md-offset2 layui-col-xs-offset2 layui-col-sm-offset2">
              <input th:type="${su.type}" th:value="${option}" th:name="answer[+${iterStat.index}+]"
                     th:title="${option}">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-row">
            <div
                class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-md-offset4 layui-col-xs-offset4 layui-col-sm-offset4 ">
              <button class="layui-btn" lay-submit lay-filter="formDemo">
                立即提交
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>

    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script>
      //Demo
      layui.use("form", function () {
        var form = layui.form;
        //监听提交
        form.on("submit(formDemo)", function (data) {
          // console.log(data.form.childElementCount);
          // // 第一个为userid
          // // 最后一个为提交按钮
          // let count = data.form.childElementCount - 2;
          // let field = data.field;
          //
          // console.log(data);
          // console.log(field);
          // for (let i = 0; i < count; i++) {
          //   if (field[i] == '' || field[i] == undefined) {
          //     layer.msg(`第${i + 1}题未做！！`);
          //     return false;
          //   }
          // }
          return true;
        });
      });
    </script>
  </body>
</html>